<template>
  <div @click="do_closeSelect">
    <div class="minWidth">
      <div class=" f-bian">
        <div class="top-position "> 当前位置： <span class="pointer" @click="def_getBack">查询</span>> <span >比较</span></div>
        <!--顶部选择比较-->
        <div class="flex selectNavWrapper">
          <span class="itemCenter">比较指标：</span>
          <div class="relt selectNav" @click.stop.prevent="do_selectShow">
            请选择对比内容
            <ul v-show="selectShow" @click.stop>
              <li class="pointer" v-for="(item,index) in selectData" :key="index" >
                <label style="width: 100%" class="f-bian pointer">
                  <span v-text="item.Name" v-if="item.Name">标题</span>
                  <input type="checkbox"  :class="[item.IsSelect&&item.isShowDoc?'inputCheck':'',item.IsSelect&&!item.isShowDoc?'inputRadio':'',!item.isShowDoc?'isCheckBox':'']" @click.stop="do_select(item,index)">
                </label>
              </li>
            </ul>
            <span class="iconfont icon-xiala"></span>
          </div>
        </div>
      </div>
      <!--基础信息比较-->
      <div class="content-title">
        <span class="iconfont icon-changyongicon-"></span>
        <span>基础信息比较</span>
      </div>
      <div class="infoCompare">
        <ul>
            <li class="f-bian" v-if="selectData[0].IsSelect"><div class="flex150" v-text="selectData[0].Name"> 标题</div> <div class="flex1 "><ul class="flex">   <li class="flex1 borderR relt" v-for="(item,index) in compareData" ><span v-text="item.title"></span> <span class="iconfont icon-shanchu" @click="do_deleteCompare(item)"></span></li> </ul> </div></li>
            <li class="f-bian" v-if="selectData[1].IsSelect"><div class="flex150" v-text="selectData[1].Name"> 所属单位</div> <div class="flex1 "><ul class="flex"><li class="flex1 borderR" v-for="(item,index) in compareData"><span v-text="item.WorkUnitName">1</span></li></ul> </div></li>
            <li class="f-bian" v-if="selectData[2].IsSelect"><div class="flex150" v-text="selectData[2].Name"> 课题来源</div> <div class="flex1 "><ul class="flex"><li class="flex1 borderR" v-for="(item,index) in compareData"><span v-text="item.EvaluationOrigin">1</span></li></ul> </div></li>
            <li class="f-bian" v-if="selectData[3].IsSelect"><div class="flex150" v-text="selectData[3].Name"> 获奖级别</div> <div class="flex1 "><ul class="flex"><li class="flex1 borderR" v-for="(item,index) in compareData"><span v-text="item.LevelType">1</span></li></ul> </div></li>
            <li class="f-bian" v-if="selectData[4].IsSelect"><div class="flex150" v-text="selectData[4].Name"> 获奖等级</div> <div class="flex1 "><ul class="flex"><li class="flex1 borderR" v-for="(item,index) in compareData"><span v-text="item.GradeLevel">1</span></li></ul> </div></li>
            <li class="f-bian" v-if="selectData[5].IsSelect"><div class="flex150" v-text="selectData[5].Name"> 成果范围</div> <div class="flex1 "><ul class="flex"><li class="flex1 borderR" v-for="(item,index) in compareData"><span v-text="item.ResultModel">1</span></li></ul> </div></li>
        </ul>
      </div>
      <!--内容比较-->
      <div class="content-title ">
        <span class="iconfont icon-changyongicon-"></span>
        <span>{{contentTitle}}</span>
      </div>
      <div class="contentCompare infoCompare">
        <ul>
          <li class="f-bian" v-if="selectData[6].isShow" v-show="selectData[6].IsSelect"> <div class="flex1 "><ul class="flex "><li class="flex1 borderR borderR2" v-for="(item,index) in compareData" :key="index"><div class="borderR2Div"><iframe class= "iFrameHomePage" scrolling='none' :src= "item.File.LUrl" ></iframe></div></li></ul> </div></li>
          <li class="f-bian" v-if="selectData[7].isShow" v-show="selectData[7].IsSelect"> <div class="flex1 "><ul class="flex "><li class="flex1 borderR borderR2" v-for="(item,index) in compareData" :key="index"><div class="borderR2Div"><iframe class= "iFrameHomePage" scrolling='none' :src= "item.File1.LUrl" ></iframe></div></li></ul> </div></li>
          <li class="f-bian" v-if="selectData[8].isShow" v-show="selectData[8].IsSelect"> <div class="flex1 "><ul class="flex"><li class="flex1 borderR borderR2" v-for="(item,index) in compareData" :key="index"><div class="borderR2Div"><iframe class= "iFrameHomePage" scrolling='none' :src= "item.File2.LUrl" ></iframe></div></li></ul> </div></li>
          <li class="f-bian" v-if="selectData[9].isShow" v-show="selectData[9].IsSelect"> <div class="flex1 "><ul class="flex"><li class="flex1 borderR borderR2" v-for="(item,index) in compareData" :key="index"><div class="borderR2Div" ><iframe class= "iFrameHomePage" scrolling='none' :src= "item.File3.LUrl" ></iframe></div></li></ul> </div></li>
          <li class="f-bian" v-if="selectData[10].isShow" v-show="selectData[10].IsSelect"><div class="flex1 "><ul class="flex"><li class="flex1 borderR borderR2" v-for="(item,index) in compareData" :key="index"><div class="borderR2Div"><iframe class= "iFrameHomePage" scrolling='none' :src= "item.File4.LUrl" ></iframe></div></li></ul> </div></li>
          <li class="f-bian" v-if="selectData[11].isShow" v-show="selectData[11].IsSelect"> <div class="flex1 "><ul class="flex"><li class="flex1 borderR borderR2" v-for="(item,index) in compareData" :key="index"><div class="borderR2Div"><iframe class= "iFrameHomePage" scrolling='none' :src= "item.File5.LUrl" ></iframe></div></li></ul> </div></li>

        </ul>
      </div>
    </div>
    <!--详细比较弹出-->
    <div class="compareDetail" v-if="false">
      <div class="compareContent">
        <div class="content-title content-title2 f-bian">
          <div >
            <span class="iconfont icon-changyongicon-"></span>
            <span>基础信息比较</span>
          </div>
          <div class="flex closeRight" @click="do_closeRight">
            <div class="iconfont icon-shanchu icon-shanchuBlue"></div> <div>关闭</div>
          </div>

        </div>
        <!--详细比较内容-->
        <div>
          <ul class=" compareContentUl" >
            <li v-for="(item,index) in compareDetail" :key="index"><div>标题：{{item.title}}</div>
              <!--<div v-html="item.content"></div>-->
             <div>
               <iframe class= "iFrameHomePage" scrolling='none' :src= "item.content" style="width:100%;height: 248px;border: none"></iframe>
             </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        name: "yw_cgkCompare",
      inject:['reload'],
      components:{

      },
      props:{
        compareData:Array
      },
      mounted(){
          if(this.compareData.length==2){
            this.$nextTick(()=>{
              this.sef_setWidth()
            })


          }
      },
      watch:{
        compareData(newV,oldV){
          if(this.compareData.length==2){

            this.$nextTick(()=>{
              this.sef_setWidth()
            })

          }
        }
      },
      data(){
        return{
          contentTitle:'',
          deletDate:{},
          deletECompareIndex:'',
          compareDetailShow:false,
          selectIndex:[true,true,true,true,true,true,true,true,true,true,true,true],
          selectShow:false,
          selectData:[
            {Name:"标题",IsSelect:true,isShow:false},
            {Name:"所属单位",IsSelect:true,isShow:false},
            {Name:"课题来源",IsSelect:true,isShow:false},
            {Name:"或将级别",IsSelect:true,isShow:false},
            {Name:"获奖等级",IsSelect:true,isShow:false},
            {Name:"成果全文",IsSelect:true,isShow:false},
            {Name:"成果范围",IsSelect:true,isShow:false},
            {Name:"成果背景",IsSelect:true,isShow:false},
            {Name:"成果内容",IsSelect:true,isShow:false},
            {Name:"成果创新",IsSelect:true,isShow:false},
            {Name:"成果效果",IsSelect:true,isShow:false},
            {Name:"问题与思考",IsSelect:true,isShow:false},
          ],

          compareDetail:[]
        }
      },
      created(){
       this.do_getComplePropertySetList()
      },
      methods:{
          sef_setWidth(){
            let first=false
            if(first){
              let iframeAll= document.getElementsByClassName("borderR2Div")
              for(let i=0; i < iframeAll.length;i++){
                iframeAll[i].style.width="800px";
              }
            }else {
              setTimeout(()=>{
                let iframeAll= document.getElementsByClassName("borderR2Div")
                for(let i=0; i < iframeAll.length;i++){
                  iframeAll[i].style.width="800px";
                }
              },200)
            }
            first=true
          }
          ,
        do_closeSelect(){
          this.selectShow=false
        },
        def_getBack(){
          this.reload()
        },
        do_selectShow(){
          this.selectShow=!this.selectShow
        },
        do_select(item,index){
          if(index!=0){
            item.IsSelect=!item.IsSelect
            item.isShow=true
            if(item.isShowDoc){
              this.contentTitle=item.Name
              this.selectData.forEach((item2,index2)=>{
                if(item2.isShowDoc){
                  if(index!=index2){
                    item2.IsSelect=false
                  }
                }
              })
            }
            this.doSaveComplePropertySet()
          }
          if(index>5){
            if(this.compareData.length==2){
              this.$nextTick(()=>{
                this.sef_setWidth()
              })
            }
          }

        },
        doSaveComplePropertySet(){ //保存个人对比记录
          let me = this;
          let arr=[]
          me.selectData.forEach((item)=>{
            if(item.IsSelect){
              arr.push(item.Name)
            }
          })
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin:'true',
            Paras:{
              Name: 'Vue_resultLib',
              Action: 'doSaveComplePropertySet',
              Data:{
                pstr:arr.join()
              }
            },
            Callback:me.cb_SaveComplePropertySet,
            Scope:me
          })
        },
        cb_SaveComplePropertySet(resJson,scope){
          console.log("保存个人对比记录",resJson)
        },
        do_getComplePropertySetList(){  //获取个人选择列表
          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin:'true',
            Paras:{
              Name: 'Vue_resultLib',
              Action: 'getComplePropertySetList',
              Data:{
              }
            },
            Callback:me.cb_getComplePropertySetList,
            Scope:me
          })
        },
        cb_getComplePropertySetList(resJson,scope){
          console.log('个人对比信息列表',resJson)
          if(resJson.success){
            let noIframe=true
            this.selectData=resJson.data
            this.selectData.forEach((item,index)=>{
              if(index<5){
                this.$set(item,"isShow",true)
              }else {
                this.$set(item,"isShow",false)
              }
              if(item.isShowDoc){
                if(item.IsSelect){
                  noIframe=false
                  this.contentTitle=item.Name
                  item.isShow=true
                }

              }
            })
            if(noIframe){  //如果一个都没选择默认全文
              this.$set(this.selectData[6],"IsSelect",true)
              this.$set(this.selectData[6],"isShow",true)
              this.contentTitle=this.selectData[6].Name
            }
          }else {
            this.$confirm({
              type:"错误",
              msg:resJson.msg,
              btn:{
                ok:"ok"
              }
            })
          }
        },
        do_deleteCompare(item){
          this.deletDate=item
          this.$confirm({
            type:'温馨提示',
            msg:'确定要删除此条数据?',
            btn:{
              ok:'yes',
              no:'no'
            }
          }).then(()=>{
            if(this.compareData.length>2){
              let me = this;
              me.$ZcPublic.zcServer.Post({      //退出接口调用
                IsNeedLogin:'true',
                Paras:{
                  Name: 'Vue_resultLib',
                  Action: 'doComple_ResultShow',
                  Data:{
                    SN:item.SN,
                    isComple:false
                  }
                },
                Callback:me.cb_Comple_ResultShow,
                Scope:me
              })

            }else {
              this.$confirm({
                type:'温馨提示',
                msg:'最少对比两条数据！',
                btn:{
                  ok:'yes'

                }
              })
            }
          })
        },
        cb_Comple_ResultShow(resJson,scope){
          console.log("删除返回",resJson)
          if(!resJson.success){
            this.$confirm({
              type:'错误',
              msg:resJson.msg,
              btn:{
                ok:'ok'
              }
            })
          }else {
            this.compareData.forEach((item1,index1)=>{
              if(item1.SN==this.deletDate.SN){
                this.compareData.splice(index1,1)
              }
            })
          }
        },
        // do_compareDetail(index){
        //   // alert(index)
        //   this.compareDetail=[]
        //   this.compareDetailShow=true
        //   this.compareData.forEach((item,index2)=>{
        //     let _data={}
        //     _data.title=item.title
        //
        //     switch (index){
        //       case 6:
        //         _data.content=item.File1.LUrl;
        //         break;
        //       case 7:
        //         _data.content=item.File2.LUrl;
        //         break;
        //       case 8:
        //         _data.content=item.File3.LUrl;
        //         break;
        //       case 9:
        //         _data.content=item.File4.LUrl;
        //         break;
        //       case 10:
        //         _data.content=item.File5.LUrl;
        //         break;
        //
        //     }
        //     this.compareDetail.push(_data)
        //   })
        //  console.log(this.compareDetail)
        // },
        // do_closeRight(){
        //   this.compareDetailShow=false
        // }

      },
      computed:{
        getCompareData(){
          return this.$store.getters.getCompareData
        }
      }
    }
</script>

<style scoped>

  @font-face {
    font-family: 'iconfont';  /* project id 1287028 */
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot');
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff') format('woff'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.svg#iconfont') format('svg');
  }
  input[type="checkbox"],.isCheckBox{
    /*margin-left: 10px;*/
    position: relative;
    width: 19px;
    height: 19px;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border-radius: 50%;
    border: 1px solid #cccccc;
    left: -3px !important;
  }
  .pointer>.isCheckBox{
    border-radius: 0 ;
    width: 18px;
    height: 18px;
  }
  .inputCheck:before, .inputRadio:before{
    font-family: "iconfont" ;
    content: "\e62b" !important;
    font-size:20px !important;
    font-weight: 400 !important;
    color: #418EFD !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -9px 0px 0px -5px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
  }
  .inputRadio:before{
    font-family: "iconfont" ;
    content: "\e63c" !important;
    font-size: 18px !important;
    margin: -10px 0px 0px -5px !important;
  }
  .top-position{
    height: 40px;
    line-height: 40px;
  }
  .top-position span{
    color: #418EFD;
  }
.selectNavWrapper .itemCenter{
  height: 30px;
  line-height: 30px;
  display: inline-block;
}
  .top-position>div{
    height: 40px;
    line-height: 40px;
  }
  .selectNav{
    height: 30px;
    line-height: 30px;
    border: 1px solid #B0B0B0;
    width: 250px;
    background-color: white;
    cursor: pointer;
    padding-left: 5px;
    font-size: 14px;
  }
  .icon-xiala{
    position: absolute;
    right: 8px;
    top: 0px;
    color: #3B3B3B;
    font-size: 12px;
  }
  .selectNav ul{
    margin: 0;
    border: 1px solid #B0B0B0 ;
    /*box-sizing: border-box;*/
    position: absolute;
    width: 250px;
    top: 28px;
    left: -1px;
    z-index: 100;
    border-bottom: none;
  }
  .selectNav ul li{
    padding: 0 10px 0 30px;
    height: 29px;
    border-bottom: 1px solid  #B0B0B0;
    background-color: white;
  }
  .content-title{
    height: 40px;
    line-height: 40px;
    background-color: white;
    font-weight: 500;
  }
  .content-title .iconfont{
    font-size: 24px;
    margin-left: 10px;

  }
  .infoCompare{
    background-color: white;
    margin-top: 10px;
  }
  .infoCompare>ul>li{
    border-bottom: 1px solid #E6E6E6;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .flex150{
    width: 150px;
    border-right: 1px solid #E6E6E6;
    color: #418EFD;
    height: 100%;
  }
  .borderR{
    border-right: 1px solid #E6E6E6;
  }
  .borderR:last-child{
    border: none;
  }
  .contentCompare>ul>li{
    height: 500px;
    line-height:500px;
  }
  .contentCompare>ul>li>.f-tb>span{
    height: 20px;
    line-height: 20px;
  }
  .contentCompare>ul>li>.f-tb>span:last-child{
    font-size: 14px;
    margin-top: 5px;
    text-decoration: underline;
    color: #666666;
    cursor: pointer;
  }
  .icon-shanchu{
    position: absolute;
    right: 5px;
    top: -15px;
    cursor: pointer;
    color: #FC6268;
  }
  /*弹出比较*/
  .compareDetail{
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.4);
    z-index: 999;
  }
  .compareDetail .compareContent{
    width: 1200px;
   position: absolute;
    top: 0px;
    bottom: 0;
    background-color: white;
   left: 50%;
    margin-left: -600px;
  }
  .content-title2{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid gainsboro;
  }
  .icon-shanchuBlue{
    color:  #418EFD !important;
    position: relative;
    font-size: 22px;
    top: 0px;
    margin-right: 2px;
  }
  .closeRight{
    height: 60px;
    line-height: 60px;
    margin-right: 15px;
    cursor: pointer;
  }
  .compareContentUl{
    width: 100%;
  position: absolute;
    top: 50px;
    bottom: 0;
  display: flex;
    flex-direction: column;
    padding: 10px 30px 0 30px;
  }
  .compareContentUl li{
    flex: 1;
    position: relative;
  }
  .compareContentUl li>div:last-child{
    position: absolute;
    top: 30px;
    bottom: 0;
    border: 1px solid green;
    width: 100%;
    overflow: auto;
  }
  .borderR2{
    border-right: 1px solid #ccc;
    height: 500px;
    position: relative;
    overflow:scroll;
  }
  .borderR2>div{
    position: absolute;
    width:600px;
    top: 0;
    bottom: 0;
  }
  .iFrameHomePage{

  }
  .minWidth{
    width: 95% !important;
    min-width: 1200px !important;

  }
  .minWidth>.f-bian{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .iFrameHomePage{
    height: 475px!important;
  }
  .pointer{
    cursor: pointer !important;
  }
  iframe{
    width: 100%;
    border:none
  }
</style>
